<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>角色管理</title>
    <base href="<%=basePath%>">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" />
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js" ></script>
    <script type="text/javascript">
        jQuery(function () {
            $.extend($.fn.validatebox.defaults.rules, {
                //新增酒店重复验证
                hotelNameRepetition: {
                    validator: function (value) {
                        var b = false;
                        $.ajax({
                            type: "post", dataType: "text", async: false,
                            data: {
                                hotelName: value
                            },
                            url: "hotelAction!isExistHotel",
                            success: function (data) {
                                if (data == 'true') {
                                    b = true;
                                }
                            }
                        });
                        return b ? true : false;
                    },
                    message: '该地区酒店已存在'
                }
            });

            $('form[name="edit1"] input[name="hotelName"]').validatebox({
                required: true,
                validType: 'length[2,30]',
                missingMessage: '请输入用户名',
                invalidMessage: '用户名长度为2-30 位'
            });
            //搜索框初始化
            $('form[name="search"] #param_cityName').combobox({
                mode: 'remote',
                //editable :       false,
                invalidMessage: '请选择城市',
                panelHeight: 'auto',
                url: 'cityAction!getCityName',
                method: 'post',
                valueField: 'cityName',
                textField: 'cityName'
            });

            $('form[name="search"] #param_hotelType').combobox({
                mode: 'remote',
                //editable :       false,
                invalidMessage: '请选择城市',
                panelHeight: 'auto',
                url: 'hotelAction!getHotelType',
                method: 'post',
                valueField: 'hotelType',
                textField: 'hotelType'
            });

            //新增酒店
            jQuery("#add_div").dialog({
                width: 600,
                height: 360,
                algin: 'center',
                title: '新增酒店',
                modal: true,
                closed: true,
                cache: false,
                contentType: false,
                processData: false,
                href: 'hotelAction!addPage',
                iconCls: 'icon-user_add',
                buttons: [
                    {
                        id: 'button_1', text: '提交', iconCls: 'icon-add-new', handler: function () {
                        jQuery('#button_1').linkbutton('disable');
                        if ($('#add').form('validate')) {
                            $.ajax({
                                url: 'hotelAction!addHotel',
                                type: 'post',
                                dataType: 'json',
                                data: new FormData(jQuery("#add")[0]),
                                cache: false,
                                contentType: false,
                                processData: false,
                                beforeSend: function () {
                                    $.messager.progress({text: '正在新增中...'});
                                },
                                success: function (jsonData, response, status) {
                                    jQuery('#button_1').linkbutton('enable');
                                    $.messager.progress('close');
                                    $('#add').form('reset');
                                    $('#add_div').dialog('close');
                                    var flag = jsonData.flag;
                                    var errorMsg = jsonData.msg;
                                    if (flag == true) {
                                        jQuery("#grid_div").datagrid("reload");
                                        $('#add')[0].reset();
                                        $('#add_div').dialog('close');
                                        jQuery.messager.confirm("继续添加", errorMsg, function (r) {
                                            if (r) {
                                                $('#add_div').dialog('open');
                                            } else {
                                                jQuery("#grid_div").datagrid("reload");
                                            }
                                        });
                                    } else {
                                        $.messager.alert("操作提示", "操作失败，原因 = " + errorMsg, "warning");
                                        jQuery("#grid_div").datagrid("reload");
                                    }
                                }
                            });
                        } else {
                            jQuery('#button_1').linkbutton('enable');
                        }
                    }
                    }, {
                        text: '取消', iconCls: 'icon-redo', handler: function () {
                            $('#add').form('reset');
                            $('#add_div').dialog('close');
                        }
                    }]
            });

            //修改酒店
            jQuery("#edit").dialog({
                width: 600,
                height: 360,
                algin: 'center',
                title: '修改酒店',
                modal: true,
                closed: true,
                cache: false,
                contentType: false,
                processData: false,
                iconCls: 'icon-edit',
                buttons: [
                    {
                        id: 'button_1', text: '提交', iconCls: 'icon-edit-new', handler: function () {
                        jQuery('#button_1').linkbutton('disable');
                        if ($('#edit').form('validate')) {
                            $.ajax({
                                url: 'hotelAction!editHotel',
                                type: 'post',
                                dataType: 'json',
                                data:  new FormData($( "#edit1" )[0]),
                                cache: false,
                                contentType: false,
                                processData: false,
                                beforeSend: function () {
                                    $.messager.progress({text: '正在修改中...'});
                                },
                                success: function (jsonData, response, status) {
                                    $.messager.progress('close');
                                    $('#edit').dialog('close');
                                    var flag = jsonData.flag;
                                    var errorMsg = jsonData.msg;
                                    jQuery('#button_1').linkbutton('enable');
                                    if (flag == true) {
                                        jQuery("#grid_div").datagrid("reload");
                                        $('#edit').dialog('close');
                                        jQuery.messager.confirm("确认修改", errorMsg, function (r) {
                                            if (!r) {
                                                $('#edit').dialog('open');
                                            } else {
                                                jQuery("#grid_div").datagrid("reload");
                                            }
                                        });
                                    } else {
                                        $.messager.alert("操作提示", "操作失败，原因 = " + errorMsg, "warning");
                                        jQuery("#grid_div").datagrid("reload");
                                    }
                                }
                            });
                        } else {
                            jQuery('#button_1').linkbutton('enable');
                        }
                    }
                    }, {
                        text: '取消', iconCls: 'icon-redo', handler: function () {
                            $('#edit').dialog('close')
                            $("#edit1").form('reset');
                        }
                    }]
            });


            //数据显示
            jQuery('#grid_div').datagrid({
                url: 'hotelAction!listGrid',
                fit: true,
                fitColumns: true,
                striped: true,
                loadMsg: "加载数据",
                rownumbers: true,
                border: false,
                pagination: true,
                pageSize: 10,
                pageList: [5, 10, 15, 20, 25],
                pageNumber: 1,
                sortName: 'hotelCode',
                sortOrder: 'asc',
                toolbar: '#grid_tool',
                remoteSort: true,
                frozenColumns: [[                                //锁列
                    {field: "ck", checkbox: true, width: 30},
                    {field: "hotelId", title: "酒店ID", width: 50}
                ]],
                columns: [[
                    {field: "hotelCode", title: "酒店编码", align: "left", halign: "center", sortable: true},
                    {field: "hotelName", title: "酒店名称", align: "left", halign: "center", sortable: true},
                    {field: "cityName", title: "所在城市", align: "left", halign: "center", sortable: true},
                    {field: "landmarks", title: "主要地标", align: "left", halign: "center", sortable: true},
                    {field: "areaName", title: "所在区域", align: "left", halign: "center", sortable: true},
                    {field: "hotelDesc", title: "酒店描述", align: "left", halign: "center"},
                    {field: "hotelImg", title: "酒店图片", align: "left", halign: "center",
                        formatter: function (value, row) {
                            var str = "";
                            if (value != "" || value != null) {
                                str = "<img style='height: 80px;width: 150px;' src="+value+" />";
                                return str;
                            }
                        }},
                    {field: "hotelType", title: "酒店类型", align: "left", halign: "center", sortable: true},

                ]],
                //操作事件
                onRowContextMenu: function (e, rowIndex, rowData) {
                    e.preventDefault();
                    $('#right_click').menu('show', {
                        left: e.pageX,
                        top: e.pageY
                    });
                }
            });

            //按钮事件
            grid_tool = {
                //刷新
                reload: function () {
                    jQuery('#grid_div').datagrid('reload');
                },
                //撤销
                redo: function () {
                    $('#grid_div').datagrid('unselectAll');
                    $('#search').form('clear');

                },
                //添加
                add: function () {
                    $('#add_div').dialog('open');
                    $('input[name="hotelName"]').focus();
                },
                //搜索
                search: function () {
                    var param_hotelName = jQuery("#param_hotelName").val();
                    var param_hotelCode = jQuery("#param_hotelCode").val();
                    var param_hotelDesc = jQuery("#param_hotelDesc").val();
                    var param_hotelType = jQuery("#param_hotelType").combobox('getValue');
                    var param_cityName = jQuery("#param_cityName").combobox('getValue');
                    var param_createUser = jQuery("#param_createUser").val();

                    var paramObj = {
                        "param_hotelName": param_hotelName,
                        "param_hotelType": param_hotelType,
                        "param_hotelCode": param_hotelCode,
                        "param_hotelDesc": param_hotelDesc,
                        "param_createUser": param_createUser,
                        "param_cityName": param_cityName

                    };
                    jQuery("#grid_div").datagrid({
                        queryParams: paramObj
                    });
                },
                //删除
                remove: function () {
                    var selectArray = $('#grid_div').datagrid('getSelections');
                    if (selectArray == null || selectArray.length == 0) {
                        $.messager.alert("操作提示", "你还还未选中记录，不能执行删除操作", "warning");
                    } else {
                        $.messager.confirm('确定操作', '您正在要删除所选的记录吗？', function (flag) {
                            if (flag) {
                                var ids = [];
                                for (var i = 0; i < selectArray.length; i++) {
                                    ids.push(selectArray[i].hotelId);
                                }
                                jQuery.ajax({
                                    type: 'POST',
                                    url: 'hotelAction!deleteHotelById',
                                    data: {
                                        ids: ids.join(',')
                                    },
                                    dataType: 'json',
                                    success: function (jsonData) {
                                        var flag = jsonData.flag;
                                        var errorMsg = jsonData.msg;
                                        if (flag == true) {
                                            jQuery("#grid_div").datagrid("reload");
                                            $.messager.show({title: '提示', msg: errorMsg, timeout: 2000});
                                        } else {
                                            $('#grid_div').datagrid('unselectAll');
                                            $.messager.alert("操作提示", "操作失败，原因 = " + errorMsg, "warning");
                                            jQuery("#grid_div").datagrid("reload");
                                        }
                                    }
                                });
                            }
                        });
                    }
                },
                //编辑
                edit: function () {
                    var selectArray = $('#grid_div').datagrid('getSelections');
                    if (selectArray.length > 1) {
                        $.messager.alert('警告操作！', '编辑记录只能选定一条数据！', 'warning');
                    } else if (selectArray.length == 1) {

                        $.ajax({
                            url: 'hotelAction!getHotelById',
                            type: 'post',
                            dataType: 'json',
                            data: {
                                hotelId: selectArray[0].hotelId
                            },
                            beforeSend: function () {
                                $.messager.progress({text: '正在获取中...'});
                            },
                            success: function (jsonData, response, status) {
                                $.messager.progress('close');
                                var flag = jsonData.flag;
                                var msg = jsonData.msg;
                                //加载酒店类型
                                $('form[name="edit1"] #hotelType').combobox({
                                    required: true,
                                    editable: false,
                                    missingMessage: '请选择酒店类型',
                                    panelHeight: 'auto',
                                    url: 'hotelAction!getHotelType',
                                    method: 'post',
                                    valueField: 'hotelType',
                                    textField: 'hotelType'
                                });

                                $('form[name="edit1"] #cityName').combobox({
                                    mode: 'remote',
                                    required: true,
                                    //editable :       false,
                                    invalidMessage: '请选择城市',
                                    panelHeight: 'auto',
                                    url: 'cityAction!getAllCityName',
                                    method: 'post',
                                    valueField: 'cityName',
                                    textField: 'cityName',
                                    onChange: function () {
                                        var cityName = $('form[name="edit1"] #cityName').combobox('getText');
                                        $("#landmarks").combobox({
                                            mode: 'remote',
                                            required: true,
                                            invalidMessage: '请选择主要地标',
                                            panelHeight: 'auto',
                                            url: 'cityAction!getLandmarks?cityName=' + cityName,
                                            method: 'get',
                                            valueField: 'landmarks',
                                            textField: 'landmarks',
                                            onChange: function (newValue,oldValue) {
                                                console.log("oldValue="+oldValue);
                                                console.log("newValue="+newValue);
                                                $("#areaName").combobox({
                                                    mode: 'remote',
                                                    editable: false,
                                                    required: true,
                                                    invalidMessage: '请选择区域名称',
                                                    panelHeight: 'auto',
                                                    url: 'cityAction!getAreaName?cityName=' + cityName + "&landmarks=" + newValue,
                                                    method: 'get',
                                                    valueField: 'cityId',
                                                    textField: 'areaName',
                                                    onChange: function () {
                                                        console.log($('form[name="add"] #areaName').combobox('getValue'));

                                                    }
                                                })
                                            }
                                        })
                                    },
                                });
                                if (flag) {
                                    $('#edit').form('load', {
                                        "hotelVo.hotelId": msg.hotelId,
                                        "hotelVo.hotelCode": msg.hotelCode,
                                        "hotelVo.hotelType": msg.hotelType,
                                        "hotelVo.createUser": msg.createUser,
                                        "hotelVo.hotelName": msg.hotelName,
                                        "hotelVo.hotelDesc": msg.hotelDesc,
                                        "hotelVo.cityName": msg.cityName,
                                        "hotelVo.landmarks": msg.landmarks,
                                        "hotelVo.areaName": msg.areaName
                                    }).dialog('open');

                                } else {
                                    $.messager.alert("操作提示", "操作失败，原因 = " + msg, "warning");
                                }
                            }
                        });
                    } else if (selectArray.length == 0) {
                        $.messager.alert('警告操作！', '编辑记录至少选定一条数据！', 'warning');
                    }
                }
            };
        })
    </script>
</head>
<body>
<div id="right_click" class="easyui-menu" style="width:120px;display:none;">
    <div iconCls="icon-add-new" onclick="grid_tool.add();">添加</div>
    <div iconCls="icon-edit-new" onclick="grid_tool.edit();">修改</div>
    <div iconCls="icon-delete-new" onclick="grid_tool.remove();">删除</div>
    <div iconCls="icon-reload" onclick="grid_tool.reload();">刷新</div>
    <div iconCls="icon-cancel" onclick="grid_tool.redo();">取消选择</div>
</div>
<div id="grid_tool" style="padding:5px;">
    <div style="margin-bottom:5px;">
        <a class="easyui-linkbutton" iconCls="icon-add-new" plain="true" onclick="grid_tool.add();">添加</a>
        <a class="easyui-linkbutton" iconCls="icon-edit-new" plain="true" onclick="grid_tool.edit();">修改</a>
        <a class="easyui-linkbutton" iconCls="icon-delete-new" plain="true" onclick="grid_tool.remove();">删除</a>
        <a class="easyui-linkbutton" iconCls="icon-reload" plain="true" onclick="grid_tool.reload();">刷新</a>
        <a class="easyui-linkbutton" iconCls="icon-cancel" plain="true" onclick="grid_tool.redo();">取消选择</a>
    </div>
    <div style="padding:0 0 0 7px;color:#333;">
        <form id="search" name="search">
            <p>
                酒店名称：<input type="text" class="textbox" name="param_hotelName" id="param_hotelName" style="width:110px">
                酒店编码：<input type="text" class="textbox" name="param_hotelCode" id="param_hotelCode" style="width:110px">
                酒店描述：<input type="text" class="textbox" name="param_hotelDesc" id="param_hotelDesc" style="width:110px">
                创建人员：<input type="text" class="textbox" name="param_createUser" id="param_createUser" style="width:110px">
            </p>
            酒店类型：<input type="text" class="textbox" name="param_hotelType" id="param_hotelType" style="width:110px">
            所在城市: <input type="text" class="easyui-combobox" name="param_cityName" id="param_cityName" value=""/></td>
            <a class="easyui-linkbutton" iconCls="icon-search" onclick="grid_tool.search();">查询</a>
            </p>
        </form>
    </div>
</div>
<div id="grid_div"></div>
<div id="add_div"></div>
<div id="edit">
    <div class="easyui-layout" data-options="fit:true">
        <div data-options="region:'west',split:true" style="width:280px;">
            <form id="edit1" enctype="multipart/form-data" name="edit1" style="margin:0;padding:5px 0 0 20px;color:#333;">
                <table border="0">
                    <tr>
                        <td>酒店名称</td>
                        <td>
                            <input type="hidden" name="hotelVo.hotelId" id="hotelId" value="">
                            <input type="text" class="textbox" name="hotelVo.hotelName" id="hotelName" value=""/>
                        </td>
                    </tr>
                    <tr>
                        <td>酒店编码</td>
                        <td><input type="text" class="textbox" name="hotelVo.hotelCode" id="hotelCode" value=""></td>
                    </tr>
                    <tr>
                        <td>酒店类型</td>
                        <td><input type="text" class="easyui-combobox" name="hotelVo.hotelType" id="hotelType" value=""/></td>
                    </tr>
                    <tr>
                        <td>所在城市</td>
                        <td><input type="text" class="easyui-combobox" name="hotelVo.cityName" id="cityName" value=""/></td>
                    </tr>
                    <tr>
                        <td>主要地标</td>
                        <td><input type="text" class="easyui-combobox" name="hotelVo.landmarks" id="landmarks"/></td>
                    </tr>
                    <tr>
                        <td>区域名称</td>
                        <td><input type="text" class="textbox" name="hotelVo.areaName" id="areaName" value=""/></td>
                    </tr>
                    <tr>
                        <td>酒店图片</td>
                    </tr>
                    <tr>
                        <td colspan="2"><input type="file" onchange="change_photo()" name="picture" id="picture"/></td>
                    </tr>
                    <tr>
                        <td>酒店描述</td>
                        <td><textarea cols="20" rows="3" name="hotelVo.hotelDesc" id="hotelDesc" style="	border-radius: 5px;-moz-border-radius: 5px;
			-webkit-border-radius: 5px;"></textarea>
                    </tr>
                </table>
            </form>
        </div>
        <div data-options="region:'center'" style="padding:10px">
            <div id="Imgdiv">
                <img id="Img" width="100%" height="250px"/>
            </div>
        </div>
    </div>
</div>
<div id="dialog_div"></div>
<script>
    function change_photo() {
        PreviewImage($("input[name='picture']")[0], 'Img', 'Imgdiv');
    }

    function PreviewImage(fileObj, imgPreviewId, divPreviewId) {
        var allowExtention = ".jpg,.bmp,.gif,.png";//允许上传文件的后缀名document.getElementById("hfAllowPicSuffix").value;
        var extention = fileObj.value.substring(fileObj.value.lastIndexOf(".") + 1).toLowerCase();
        var browserVersion = window.navigator.userAgent.toUpperCase();
        if (allowExtention.indexOf(extention) > -1) {
            if (fileObj.files) {//HTML5实现预览，兼容chrome、火狐7+等
                if (window.FileReader) {
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        document.getElementById(imgPreviewId).setAttribute("src", e.target.result);
                    }
                    reader.readAsDataURL(fileObj.files[0]);
                } else if (browserVersion.indexOf("SAFARI") > -1) {
                    alert("不支持Safari6.0以下浏览器的图片预览!");
                }
            } else if (browserVersion.indexOf("MSIE") > -1) {
                if (browserVersion.indexOf("MSIE 6") > -1) {//ie6
                    document.getElementById(imgPreviewId).setAttribute("src", fileObj.value);
                } else {//ie[7-9]
                    fileObj.select();
                    if (browserVersion.indexOf("MSIE 9") > -1)
                        fileObj.blur();//不加上document.selection.createRange().text在ie9会拒绝访问
                    var newPreview = document.getElementById(divPreviewId + "New");
                    if (newPreview == null) {
                        newPreview = document.createElement("div");
                        newPreview.setAttribute("id", divPreviewId + "New");
                        newPreview.style.width = document.getElementById(imgPreviewId).width + "px";
                        newPreview.style.height = document.getElementById(imgPreviewId).height + "px";
                        newPreview.style.border = "solid 1px #d2e2e2";
                    }
                    newPreview.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='" + document.selection.createRange().text + "')";
                    var tempDivPreview = document.getElementById(divPreviewId);
                    tempDivPreview.parentNode.insertBefore(newPreview, tempDivPreview);
                    tempDivPreview.style.display = "none";
                }
            } else if (browserVersion.indexOf("FIREFOX") > -1) {//firefox
                var firefoxVersion = parseFloat(browserVersion.toLowerCase().match(/firefox\/([\d.]+)/)[1]);
                if (firefoxVersion < 7) {//firefox7以下版本
                    document.getElementById(imgPreviewId).setAttribute("src", fileObj.files[0].getAsDataURL());
                } else {//firefox7.0+
                    document.getElementById(imgPreviewId).setAttribute("src", window.URL.createObjectURL(fileObj.files[0]));
                }
            } else {
                document.getElementById(imgPreviewId).setAttribute("src", fileObj.value);
            }
        } else {
            alert("仅支持" + allowExtention + "为后缀名的文件!");
            fileObj.value = "";//清空选中文件
            if (browserVersion.indexOf("MSIE") > -1) {
                fileObj.select();
                document.selection.clear();
            }
            fileObj.outerHTML = fileObj.outerHTML;
        }
    }
</script>
</body>
</html>
